<script setup>

import CommonBox from "../../components/CommonBox.vue";
import {ref} from "vue";
const option = ref(
    {
      legend: {
        textStyle: {
          color: 'white'
        },

      },
      tooltip: {
        trigger: 'axis',
        showContent: false
      },

      xAxis: { type: 'category' },
      yAxis: { gridIndex: 0 },
      series: [
        {
          name: '实际成本',
          type: 'line',
          smooth: true,
          data: [3, 3.5, 3.6, 3.6, 3.6, 3.3, 2.6, 3.6, 3.6, 3.1, 2.3, 1.6, 3.2]
        },
        {
          name: '市场价格',
          type: 'line',
          smooth: true,
          data: [2, 2.5, 1.8, 1.6, 2.1, 3.5, 2.6, 3.3, 2.6, 1.6, 3.9, 1.6, 2.6]
        }

      ]
    });

</script>

<template>
  <common-box>
    <div class="chart-header">
      采购价格分析
    </div>
    <div style="height: 15em;width: 100%;">
      <v-chart :option="option"></v-chart>
    </div>
  </common-box>
</template>

<style scoped>
.chart-header {
  text-align: center;
  font-size: 1.5em;
  padding: 0.2em 0 0.2em 1em;
}
</style>